<template>
	<view class="lingpai">
		<Hearder :name="'门票购买'"></Hearder>
		<view class="content" v-if="JSON.stringify(info) !='{}'">
			<view class="shurucon">
				<view>
					<view>我的门票</view>
					<view>{{info.member_token}}</view>
				</view>
				<view @click="toPage('ticket')" v-if="info.withdrawal.open_token==1">转换</view>
			</view>
			<view class="lpprice bgbottom">
				<view>门票价格</view>
				<view>￥{{info.withdrawal.token_price}}( 1个)</view>
			</view>
			<view class="towlpcon bgbottom">
				<view>门票数量</view>
				<view>
					<u-icon @click="jian" name="minus-circle-fill" color="#F03D2F" size="30"></u-icon>
					<text>{{num}}</text>
					<u-icon @click="jia" name="plus-circle-fill" color="#F03D2F" size="30"></u-icon>
				</view>
			</view>
			<view class="ljpay" @click="buyToken">立即购买</view>
		</view>
		<Paypwd ref="paystatus" :totalprice="totalprice" @paymoney="paymoney"></Paypwd>
	</view>
</template>

<script>
	import Paypwd from '@/pages/common/paypwd.vue'
	export default {
		data(){
			return{
				num:1,
				choosenum:3,
				info:{},
				totalprice:0
			}
		},
		onShow() {
			this.buyTokenInfo()
		},
		methods:{
			// 获取页面数据
			buyTokenInfo(){
				this.request('/member/getMemberDetails').then(res=>{
					if(res.data.code == 1){
						this.info = res.data.data
					}
				})
			},
			// 数量减
			jian(){
				if(this.num>1){
					this.num--
				}
			},
			// 数量加
			jia(){
				this.num++
			},
			buyToken(){
				this.request('/member/getIsPayPassword').then(res => {
					if(res.data.code==1){
						if(res.data.data==0){
							this.$refs.paystatus.payflag = true
						}else{
							this.totalprice = this.info.withdrawal.token_price * this.num
							this.$refs.paystatus.zhifuflag = true
						}
					}else{
						this.$tip(res.data.msg)
					}
				})
			},
			paymoney(){
				this.request('/token/buyToken',{count:this.num}).then(res => {
					if(res.data.code==1){
						this.request('/pay/balancePay',{type:1,trade_no:res.data.data.order_no}).then(res => {
							if(res.data.code==1){
								this.$tip(res.data.msg)
								this.$refs.paystatus.zhifuflag = false
								setTimeout(()=>{
									uni.navigateBack()
								},500)
							}else{
								this.$tip(res.data.msg)
							}
						})
					}else{
						this.$tip(res.data.msg)
					}
				})
			},
			toPage(route){
				uni.navigateTo({
				    url: route
				});
			}
		},
		components:{
			Paypwd
		}
	}
</script>

<style scoped lang="scss">
	.lingpai{
		.content{
			.shurucon{
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 180rpx;
				background: $uni-item-color;
				>view{
					&:nth-of-type(1){
						margin-left: 30rpx;
						view{
							font-size: 24rpx;
							color: #F8F8F8;
							text-align: center;
							&:last-of-type{
								font-size: 36rpx;
								font-weight: 800;
								margin-top: 10rpx;
							}
						}
					}
					&:nth-of-type(2){
						width: 129rpx;
						height: 60rpx;
						background: #fff;
						border-radius: 60rpx 0 0 60rpx;
						color: $uni-item-color;
						font-weight: 800;
						text-align: center;
						line-height: 60rpx;
						box-sizing: border-box;
						padding-left: 6rpx;
					}
				}
			}
			.lpprice{
				display: flex;
				justify-content: space-between;
				padding: 38rpx 30rpx;
				view{
					&:last-of-type{
						color: $uni-text-color;
					}
				}
			}
			.towlpcon{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 26rpx 30rpx;
				margin-right: -2rpx;
				text{
					position: relative;
					top: -6rpx;
					font-size: 36rpx;
					font-weight: 800;
					margin: 0 40rpx;
				}
			}
			.macon{
				>view{
					height: 112rpx;
					line-height: 112rpx;
					padding: 0 30rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					&:first-of-type{
						border-bottom: $uni-border-bottom
					}
					>image{
						width: 34rpx;
						height: 34rpx;
					}
					>view{
						display: flex;
						align-items: center;
						image{
							width: 44rpx;
							height: 44rpx;
							 margin-right: 20rpx;
						}
						text{
							font-size: 28rpx;
						}
					}
				}
			}
			.ljpay{
				background: $uni-item-color;
				text-align: center;
				line-height: 88rpx;
				height: 88rpx;
				color: #fff;
				margin: 40rpx 3%;
				border-radius: 88rpx;
			}
		}
	}
</style>